<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#clock {
				color: white;
				text-align: center;
				position: absolute;
				right: 10px;
				top:10px;
				width: 280px;
				height: 40px;
				background-color: #0000FF;
				line-height: 40px;
			}
		</style>
	</head>
	<body>
		<div id="clock"></div>
		<script>
			const clockDiv = document.getElementById('clock')
			const weekdays = ['日','一','二','三','四','五','六']
			
			// 为了拿到随时间变化的日期，需把生成当前时间的代码封装成一个函数
			function showClock() {
				// 拿到本地操作系统的时间日期
				let now = new Date()
				let year = now.getFullYear()
				let month = now.getMonth() + 1
				let date = now.getDate()
				let hour = now.getHours()
				let min = now.getMinutes()
				let sec = now.getSeconds()
				let day = now.getDay()
				let fullStr = `${year}年${month}月${date}日${hour}:${min}:${sec}星期${weekdays[day]}`
				
				// .textContent 修改标签的文本内容
				clockDiv.textContent = fullStr
			}
			// 调用计时器之前防止一秒空白，先调用一下
			showClock()
			// 没隔一秒调用函数，设置计时器
			window.setInterval(showClock,1000)
		</script>
	</body>
</html>
